<template>
    <div class="text-[14px] bg-[#CCCCC9]">
        <div class="top bg-[#016DB5] text-[#fff] py-[40px] text-[20px] px-[20px] flex items-center justify-between">
            <span>员工任务明细（2025年9月）</span>
            <div class="w-[250px]">
                <ElInput type="search" v-model="keyword" placeholder="输入员工" class="w-full" :prefix-icon="Search"
                    @keydown="handleKeydown" allow-clear>
                </ElInput>
            </div>
        </div>
        <div class="list">
            <div class="item p-[20px] bg-[#fff] relative border-b-[1px] border-[#ccc] border-b-solid"
                v-for="(item, index) in list" :key="index">
                <div class="header flex items-center">
                    <span class="font-bold text-[#000] text-[20px]">{{ item.name }}</span>
                    <span
                        class="ml-[15px] bg-[#C06876] text-[#fff] px-[8px] py-[2px] rounded-[4px] inline-flex justify-center items-center">底薪：¥{{
                            item.basic_salary }}</span>
                </div>

                <div class="body flex items-center mt-[20px]" v-if="item['items']">
                    <div class="card" v-for="(item2, index) in item['items']" :key="index">
                        <div class="text-[#198754]">
                            {{ item2.title }}
                        </div>
                        <div class="text-[#DC3545] mt-[5px]">¥{{ item2.salary }}</div>
                        <img src="../../assets/images/check.png"
                            class="w-[14px] absolute left-[10px] top-[20px] select-none" />
                    </div>
                </div>

                <div class="footer flex items-center mt-[20px]">
                    <div class="tag">
                        <span>已确认：</span>
                        <span class="text-[#000]">{{ item.confirmed }}天</span>
                    </div>

                    <div class="tag">
                        <span>未确认：</span>
                        <span class="text-[#FFC008]">{{ item.confirmed }}天</span>
                    </div>

                    <div class="tag">
                        <span>工作薪资：</span>
                        <span class="text-[#000]">{{ item.confirmed }}天</span>
                    </div>

                    <div class="tag">
                        <span>总薪酬：</span>
                        <span class="text-[#DC3545]">{{ item.confirmed }}天</span>
                    </div>
                </div>

                <div class="absolute right-[10px] top-[10px]">
                    <button class="bg-[#198754] text-[#fff] text-[16px] py-[8px] px-[15px] rounded-[4px]">
                        一键发放
                    </button>

                    <span class="bg-[#016DB5] text-[#fff] ml-[10px] p-[10px] py-[4px] rounded-[6px]">0天</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from "vue";
import { ElInput } from "element-plus";
import { Search } from "@element-plus/icons-vue";

const keyword = ref("");

const list = ref([
    {
        name: "蒋子进",
        basic_salary: "6000",
        confirmed: 2,
        unConfirmed: 0,
        salary: 1200,
        totalSalary: 7200,
        items: [
            {
                title: "9/29",
                salary: "300.00",
            },
            {
                title: "9/29",
                salary: "300.00",
            },
        ],
    },

    {
        name: "蒋子进",
        basic_salary: "6000",
        confirmed: 2,
        unConfirmed: 0,
        salary: 1200,
        totalSalary: 7200,
    },

       {
        name: "蒋子进",
        basic_salary: "6000",
        confirmed: 2,
        unConfirmed: 0,
        salary: 1200,
        totalSalary: 7200,
    },   {
        name: "蒋子进",
        basic_salary: "6000",
        confirmed: 2,
        unConfirmed: 0,
        salary: 1200,
        totalSalary: 7200,
    },   {
        name: "蒋子进",
        basic_salary: "6000",
        confirmed: 2,
        unConfirmed: 0,
        salary: 1200,
        totalSalary: 7200,
    },   {
        name: "蒋子进",
        basic_salary: "6000",
        confirmed: 2,
        unConfirmed: 0,
        salary: 1200,
        totalSalary: 7200,
    },   {
        name: "蒋子进",
        basic_salary: "6000",
        confirmed: 2,
        unConfirmed: 0,
        salary: 1200,
        totalSalary: 7200,
    },   {
        name: "蒋子进",
        basic_salary: "6000",
        confirmed: 2,
        unConfirmed: 0,
        salary: 1200,
        totalSalary: 7200,
    },   {
        name: "蒋子进",
        basic_salary: "6000",
        confirmed: 2,
        unConfirmed: 0,
        salary: 1200,
        totalSalary: 7200,
    },   {
        name: "蒋子进",
        basic_salary: "6000",
        confirmed: 2,
        unConfirmed: 0,
        salary: 1200,
        totalSalary: 7200,
    },   {
        name: "蒋子进",
        basic_salary: "6000",
        confirmed: 2,
        unConfirmed: 0,
        salary: 1200,
        totalSalary: 7200,
    },
]);

const fetchData = () => {
    // fetch data
};

const handleKeydown = (e) => {
    if (e.keyCode === 13) {
        console.log("enter");
        fetchData();
    }
};
</script>

<style lang="less" scoped>
.item {
    .footer {
        .tag {
            --at-apply: font-bold text-[#585C5E] bg-[#EAECEF] px-[10px] py-[4px] rounded-[4px] mr-[15px] text-[14px];
        }
    }

    .body {
        .card {
            --at-apply: flex relative font-bold flex-col items-center justify-center bg-[#D1E7DE] border-[#198754] border-[2px] border-solid rounded-[9px] mr-[15px] cursor-pointer px-[30px] py-[15px] text-[16px];
        }
    }
}
</style>
